<template>
    <div class="vipbook">
        <div class="container">
            <Header></Header>
            <Header2></Header2>

            <div class="block  navel-in">
                <div class="row">
                    <div class="title-blue">
                        <h2>尊贵的vip小说</h2>
                    </div>
                    <hr>
                    <div class="man-t5-list" v-for="(book, index) in book_list">
                        <ul id="id_mode">
                            <li>
                                <a :href="'/detail/' + book.id">
                                    <img :src="book.book_img"
                                         :alt="book.name">
                                </a>
                                <div class="float-l">
                                    <router-link :to="'/detail/' + book.id" class="line-height-200 pull-left"
                                                 style="color: #551A88">
                                        小说：{{book.name}}
                                    </router-link>
                                    <br>
                                    <br><br>
                                    <span class="color-hui line-height-180 pull-left">作者:{{book.author_name}}&nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a href="https://www.mzitu.com" class="a-link-red "> &nbsp;&nbsp;&nbsp;分类:{{book.category_name}}</a>
                                    </span>
                                    <br>
                                    <div class="text-left">
                                        <router-link :to="'/content/' + book.id + '/1'">
                                            <span style="color: #551A88">
                                                {{book.desc}}
                                            </span>
                                        </router-link>
                                    </div>
                                </div>
                                <div>
                                    <a href="https://www.mzitu.com"
                                       class="more-link"
                                       id="id_mode_child"
                                    >更多&gt;&gt; </a>
                                </div>
                            </li>
                            <br>
                            <div class="cccc"></div>
                        </ul>
                    </div>
                    <div class="block">
                        <!--分页开始-->
                        <el-pagination
                                @current-change="handleCurrentChange"
                                background
                                layout="prev, pager, next"
                                :page-size="size"
                                :total="total_count">
                        </el-pagination>
                        <!--分页结束-->
                    </div>
                </div>
            </div>
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
    import Header from "../components/Header";
    import Header2 from "../components/Header2";
    import Footer from "../components/Footer";
    import Banner from "../components/Banner";

    export default {
        name: "VipBook",
        components: {
            Header,
            Header2,
            Footer,
        },
        data() {
            return {
                book_list: [],
                size: 10,
                total_count: 0,
            }
        },
        created() {
            this.$axios({
                url: `${this.$settings.base_url}/book/vip/?page=1&size=9`,
                method: 'get',

            }).then(response => {
                // console.log(response.data);
                this.book_list = response.data.results;
                this.total_count = response.data.count;
                // console.log(this.total_count);
                console.log('this.category_list:', this.book_list);
            })
        },
        methods: {
            handleCurrentChange(val) {
                this.$axios.get(`${this.$settings.base_url}/book/vip/?page=${val}&size=${this.size}`).then(response => {
                    // console.log('Free.vue response.data', response.data);
                    this.book_list = response.data.results;
                })
            }
        }
    }
</script>

<style>
    #id_mode {
        position: relative
    }
    #id_mode_child {
        position: absolute;
        right: 25px;
        bottom: 15px;
    }
    a, a:link {
        text-decoration: none;
        color: #333;
        margin-bottom: -9px;
    }

    .man-t5-list ul li div {
        float: left;
        width: 970px !important;
    }

    .man-t5-list img {
        vertical-align: middle;
        margin-left: 15px;
    }


    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
        width: 1140px;
    }

    /* 书籍列表*/
    .cccc {
        border: black solid 1px;
    }

    .man-t5-list ul li div {
        float: left;
        width: 1000px;
    }

    .title {

    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        border: 0;
    }


    .color-hui, .a-link-hui, .a-link-hui a, .a-link-hui a:link, .a-link-hui:link {
        color: #9fa0a0;
    }


    .line-height-180 {
        line-height: 180%;
    }

    a {
        text-decoration: none;
    }


    a:-webkit-any-link {
        color: -webkit-link;
        cursor: pointer;
        text-decoration: underline;
    }


    .color-red, .a-link-red, .a-link-red a, .a-link-red a:link, .a-link-red:link {
        color: #f00;
    }


    .line-height-200 {
        line-height: 200%;
    }


    .float-l {
        float: left;
    }


    div {
        display: block;
    }

    li {
        text-align: -webkit-match-parent;
    }

    .man-t5-list ul li img {
        width: 120px;
        height: 160px;
        float: left;
        margin-right: 20px;
    }


    .man-t5-list ul li {
        height: 160px;
        margin-bottom: 20px;
    }


    ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
    }

    .man-t5-list {
        padding: 15px;
    }

    .navel-in {
        margin-top: 20px;
    }

    .man-t4-list {
        float: left;
        width: 265px;
        border: 1px #2b9de4 solid;
        height: 560px;
        margin-top: 15px;
        margin-right: 43px;
        line-height: 200%;
    }


    .more-link {
        font-size: 12px;
        float: right;
        line-height: 36px;
    }

    h3 {
        font-size: 16px;
        font-weight: bold;
        line-height: 180%;
    }

    h3 {
        display: block;
        font-size: 1.17em;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }

    .man-t4-list ul {
        padding: 8px;
    }

    .man-t4-list ul li {
        padding: 13px 0;
        border-bottom: 2px #e6e6fa dashed;
        height: 103px;
    }

    li {
        display: list-item;
        text-align: -webkit-match-parent;
    }

    .order-num-blue {
        font-size: 22px;
        color: #2b9de4;
        float: left;
    }

    a, a:link {
        text-decoration: none;
        color: #333;
    }

    .man-t4-list ul li img {
        width: 60px;
        height: 80px;
        float: left;
        margin: 0 10px;
    }

    img {
        border: 0;
    }

    a {
        text-decoration: none;

    }

    body, p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, ol, form, input, pre, a, img {
        margin: 0;
        padding: 0;
        list-style: none;
        border: 0;
    }


</style>